<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <!--左边-->

      <div class="menus-wrapper">
        <!-- 推荐区域 -->

        <div class="menus-body" @mouseleave="mouesLeave">
          <!-- 推荐标题 -->
          <div class="menus">
            <div  class="menu-item" 
            :class="{active: showindex === index}"
            v-for="(item,index) in cityMenu" :key="index"
            @mouseenter="isShow(index)">
              <span >{{ item.type}} </span>
            </div>
          </div>

          <!-- 推荐内容 -->
          <div class="sub-menus" v-show="showM">
            <ul>
              <li  v-for="(item,index) in cities" :key="index" @click="changeshow(item)">      
                  <i>{{index + 1}}</i>
                  <strong>{{item.city}}</strong>
                  <span>{{item.desc}}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 推荐城市+固定图片 -->
        <div class="aside-recommend">
          <h4 class="aside-title">推荐城市</h4>
          <nuxt-link to="#" class="aside-recommend-item">
            <img src="/images/pic_sea.jpeg"/>
          </nuxt-link>
        </div>
      </div>
      <!-- right -->
      <div class="post-wrapper">
        <div class="search-wrapper">
          <el-row  type="flex" justify="space-between" align="middle"  class="search-bar">
            <input 
            type="text" 
            placeholder="请输入想去的地方，比如：'广州'" 
            v-model="searchValue"
            @keyup.enter="handleSearch">
            <i class="el-icon-search" @click="handleSearch"></i>
          </el-row>
          <br>
        </div>

        <div class="search-recommend">
          推荐 上海
          <hr><br><br>
        </div>

        <div>
          <el-row type="flex" justify="space-between">
            <el-col > 推荐攻略</el-col>
            <el-button type="primary" @click="create">写游记</el-button> 
          </el-row>
          <hr>
          <br><br>
        </div>

        <div >
          <postshow v-for="(item,index) in pageshow" :key="index" :data="item" ></postshow>
        </div>

        <el-row type="flex" justify="center" style="margin-top:10px;">
          <el-pagination
            v-if="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Math.floor(start / pageSize) + 1"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-row>
      </div>
    </el-row>
  </div>
</template>
<script>
import postshow from '@/components/post/postshow'

export default {
  components:{
    postshow,

  },
  mounted(){
    this.$axios({
      url:'/posts/cities',
      methods:'get'
    }).then(res=>{
      this.cityMenu=res.data.data
      console.log(520,this.cityMenu)
    })
    this.$axios({
        url:'/posts',
        methods:'get'
      }).then(res=>{
        this.allarr=res.data.data
        this.citydata=this.allarr
        //v-for allarr 找到allarr[i].id=id
        this.total=res.data.total
        this.pageshow=this.allarr.slice(this.start,this.end)
      })
  },
  data(){
    return{
      searchValue:"",
      showindex:'-1',
      cityMenu:{},
      cities:{},
      showM:false,
      city:'',
      allarr:{},

      citydata:{},
      postsearchShow:true,

      pageshow:[],//数据
      pageSize:5,//每页5条数据
      pageindex:1,
      total:0,
      start:0,
      end:5,
      
      cityname:''
    }
  
  },
  methods:{
    create(){
      this.$router.push({
        path:"/post/create",
      })
    },
    postSearching(){
    },
    isShow(index){
      this.cities=this.cityMenu[index].children
      this.showindex=index
      this.showM=true
    },
    mouesLeave(){
      this.showindex="-1"
      this.showM=false
    },
    handleSearch(){
      this.allarr=this.citydata.filter(v=>{
                return v.cityName==(this.searchValue+"市")
            })
      this.pageshow=this.allarr
    },
    handleSizeChange(value){
      this.pageSize = value;
      this.start = this.pageSize * (this.pageindex - 1);
      this.end=this.pageindex*this.pageSize
      this.pageshow=this.allarr.slice(this.start,this.end)
    },

    handleCurrentChange(value){
      this.start = this.pageSize * (value - 1);
      this.end=value*this.pageSize
      this.pageshow=this.allarr.slice(this.start,this.end)
    },
    changeshow(item){
      this.allarr=this.citydata.filter(v=>{
                return v.cityName==(item.city+"市")
            })
      this.pageshow=this.allarr
    }
  }
}
</script>

<style scoped lang="less">
  .container{
    width:1000px;
    margin:0 auto;
    padding:20px 0;
  }

  /* 菜单栏 */
  .menus-wrapper{
    position: relative;
    width:260px;
    z-index:2;

    .menus{
      width:260px;
      border:1px #ddd solid;
      border-right:none;
      border-bottom:none;
      box-shadow: 0 0 1px #f5f5f5;
      z-index:2;
    }

    .menu-item{
      height:40px;
      line-height: 40px;
      border-bottom:1px #ddd solid;
      border-right:1px #ddd solid;
      padding:0 20px;
      font-size:14px;
      position: relative;
      z-index: 2;

      &:after{
        display: block;
        content:"";
        width:10px;
        height:10px;
        border-right:1px #999 solid;
        border-top:1px #999 solid;
        transform: rotate(45deg);
        position: absolute;
        right:20px;
        top:15px;
      }

      &.active{
        border-right-color: #fff;
        color:orange;

        &:after{
          border-right-color: orange;
          border-top-color: orange;
        }
      }
    }

    .sub-menus{
      position: absolute;
      left:260px;
      top:0;
      width:350px;
      padding:10px 20px;
      box-sizing: border-box;
      background: #fff;
      border: 1px #ddd solid;

      ul li{
        font-size: 14px;
        line-height: 1.5;

        *{
          vertical-align: middle;
        }

        i {
          color:orange;
          font-size: 24px;
          font-style: italic;
        }

        strong{
          margin:0 10px;
          color: orange;
          font-weight: normal;
          &:hover{
            text-decoration: underline;
          }
        }

        span{
          color:#999;
          &:hover{
            text-decoration: underline;
          }
        }
      }
    }
  }

  /* 侧边栏推荐 */
  .aside-recommend{
    margin-top: 20px;
    
    .aside-title{
      font-weight: normal;
      padding-bottom: 10px;
      border-bottom: 1px #ddd solid;
      margin-bottom:10px;
    }

    .aside-recommend-item{
      img{
        width:100%;
        display: block;
      }
    }
  }

  /*内容*/
  .post-wrapper{
    width:700px;
  }

  /*搜索栏*/
  .search-wrapper{
    .search-bar{
      width:100%;
      box-sizing: border-box;
      height:40px;
      line-height: 40px;
      border:3px orange solid;

      input{
        flex:1;
        padding:0 20px;
        line-height: 40px;
        outline: none;
        border:none;
        background:none;
      }

      i{
        font-size: 24px;
        color:orange;
        font-weight: bold;
        margin-right:10px;
      }
    }

    .search-recommend{
      padding:10px 0;
      font-size: 12px;
      color:#666;

      span{
        margin-right:5px;
        &:hover{
          color:orange;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }

  /* 标题 */
  .post-title{
    padding-bottom:10px;
    border-bottom:1px #eee solid;
    position: relative;

    h4{
      font-weight: normal;
      font-size: 18px;
      color:orange;

      &:after{
        display:block;
        content: "";
        width:72px;
        height:2px;
        background:orange;
        position: absolute;
        bottom:0;
        left:0;
      }
    }
  }
</style>
